<template>
  <div id="ServerAlarmLog" ref="ServerAlarmLog" class="ServerAlarmLog">
    <el-table
      :header-cell-style="{
        background: 'rgb(2, 16, 51)',
        color: 'aliceblue',
        border: '0px',
        'text-align': 'center',
        padding: '0px 0px 0px 0px',
        'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset',
      }"
      :cell-style="{
        background: 'rgb(2, 16, 51)',
        color: 'aliceblue',
        border: '0px',
        'text-align': 'center',
        padding: '0 0 0 0',
      }"
      :data="tableDataFn"
      height="100%"
      style="width: 100%"
      :fit="true"
    >
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          
          :key="item.prop"
        >
          <template v-slot="scope">
            <template v-if="item.format == 'ALERT_LEVEL'">
              <div style="text-align: center">
                <el-tag
                  :type="scope.row.levelType"
                  disable-transitions
                  size="mini"
                  effect="dark"
                >
                  {{ scope.row[item.prop] }}
                </el-tag>
              </div>
            </template>
            <template v-else>
              <div>
                {{ scope.row[item.prop] }}
              </div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import { GetSqlErrorLog ,SqlLinkType} from "@/api/index.js";
import bus from "common/bus.js";
import tableColumns from "./ServerAlarmLogTableColumns.js";
import moment from "moment";
export default {
  data() {
    return {
      postData: {
        opera: "osalertlist",
        curPage: 1,
        pageSize: 20,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {
          monid: "",
        },
      },
      tableData: [],
      tableColumns: tableColumns,
      timerName: "ServerAlarmLog",
      timerEventName: "timerServerAlarmLog",
      timerInterval: 1000 * 60,
      selectedMonID: {},
    };
  },
  created() {
    bus.$on("selectedMonIDSqlServer", (msg) => {
      this.resetData();

      this.selectedMonID = msg;
      this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
    
           this.getData();
    });
    

    

    // bus.$emit("timerNewTodo", {
    //   name: this.timerName,
    //   eventName: this.timerEventName,
    //   interval: this.timerInterval,
    //   intervalNow: 0,
    // });

    // bus.$on(this.timerEventName, (msg) => {
    //   if (msg.isGetData) {
    //     this.resetData();

    //     this.getData();
    //   }
    // });
  },
  mounted() {},
  computed: {
    tableDataFn() {
      return this.tableData.filter((item) => {
        switch (item.ALERT_LEVEL) {
          case 1:
            item.ALERT_LEVEL = "提醒";
            item.levelType = "info";
            break;
          case 2:
            item.ALERT_LEVEL = "普通";
            item.levelType = "warning";
            break;
          case 3:
            item.ALERT_LEVEL = "紧急";
            item.levelType = "danger";
            break;

          default:
            break;
        }

        return item;
      });
    },
  },
  methods: {
    getData() {
      // GetSqlErrorLog({
      //   dbServername: this.selectedMonID.DBNAME,ip:this.selectedMonID.IP,
      // }).then((res) => {
       
      //   if (res.length > 0) {
      //     for (let i = 0; i < 30; i++) {
      //       this.tableData.push({
      //         SERVICESNAME: "未知",
      //         ALERTINFO: res[i].Text,
      //         ALERT_LEVEL: 3,
      //         RECORD_TIME: res[i].LogDate,
      //         IP: this.selectedMonID.selectedIP,
      //       });
      //     }
      //   }
      // });
     
       SqlLinkType({ dbServername: this.selectedMonID.DBNAME,ip:this.selectedMonID.IP })
            .then((_) => {
              let status=Object.keys(_)
              let time=Object.values(_)
              if(status==1){
                this.tableData=[]
              }else{
                this.tableData=[{
                    IP:this.selectedMonID.selectedIP,
                    LINK_TYPE:status==1?'成功连接':'连接失败',
                    RETIME:time[0]

                }]

              }
                })
    },
    resetData() {
      this.tableData = [];
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    bus.$off('selectedMonIDSqlServer')
  },
  watch: {},
};
</script>

<style scoped>
.ServerAlarmLog {
  height: calc(100% - 8px - 22px);
}
.ServerAlarmLog >>> .el-table::before {
  height: 0px !important;
}
.ServerAlarmLog >>> .el-table tr {
  background-color: rgba(1, 40, 107, 0) !important;
}
.ServerAlarmLog >>> .el-table {
  background: rgb(2, 16, 51);
}
.ServerAlarmLog >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.ServerAlarmLog >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(4, 44, 119, 0.7);
  border-radius: 3px;
}
</style>    